<template>
  <view class="charging-rule-wait-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="投诉列表" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template>
            <view></view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <view class="header-bar">
            <view class="header-bar-item" @click="openCreateTimePicker()">
              <text class="title">创建时间</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="header-bar-item" @click="openInTimePicker()">
              <text class="title">驶入时间</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="header-bar-item" @click="openOutTimePicker()">
              <text class="title">驶出时间</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <view class="header-bar-item" @click="showTimePicker = true">
              <text class="title">应收金额是否为0</text>
              <up-icon name="arrow-down"></up-icon>
            </view>
            <up-picker :show="showTimePicker" :columns="columns" :closeOnClickOverlay="true"
              @confirm="handleIsZeroConfirm" @cancel="showTimePicker = false"
              @close="showTimePicker = false"></up-picker>
          </view>

          <!-- <up-search :clearabled="true" :showAction="false" placeholder="请输入姓名、账号"></up-search> -->
          <up-tabs :list="tabsList" :scrollable="false" @change="handleTabChange"></up-tabs>
        </up-sticky>
      </template>

      <view class="charging-rule-wait-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              车牌号：<text class="number">{{ item.carPlate }}</text>
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">
                  支付状态
                </text>
                <view class="value">
                  <view class="item-tag">
                    <up-tag :text="getPayStatusText(item.isPay)" :type="getPayStatusType(item.isPay)"></up-tag>
                  </view>
                </view>
              </view>
              <view class="item">
                <text class="label">
                  订单编号：
                </text>
                <text class="value">
                  {{ item.orderNo }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  驶入时间：
                </text>
                <text class="value">
                  {{ item.inTime }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  驶出时间：
                </text>
                <text class="value">
                  {{ item.outTime }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  应收金额：
                </text>
                <text class="value">
                  {{ item.money }}元
                </text>
              </view>
              <view class="item">
                <text class="label">
                  场地名称：
                </text>
                <text class="value">
                  {{ item.veName }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  异常原因：
                </text>
                <text class="value">
                  {{ getStatusText(item.status) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <!-- 创建时间选择器 -->
    <up-datetime-picker 
      closeOnClickOverlay 
      :show="showCreateTimePicker" 
      mode="date" 
      v-model="createTime"
      @cancel="hideCreateTimePicker"
      @confirm="handleCreateTimeConfirm" 
      @close="hideCreateTimePicker">
    </up-datetime-picker>
    
    <!-- 驶入时间选择器 -->
    <up-datetime-picker 
      closeOnClickOverlay 
      :show="showInTimePicker" 
      mode="date" 
      v-model="inTime"
      @cancel="hideInTimePicker"
      @confirm="handleInTimeConfirm" 
      @close="hideInTimePicker">
    </up-datetime-picker>
    
    <!-- 驶出时间选择器 -->
    <up-datetime-picker 
      closeOnClickOverlay 
      :show="showOutTimePicker" 
      mode="date" 
      v-model="outTime"
      @cancel="hideOutTimePicker"
      @confirm="handleOutTimeConfirm" 
      @close="hideOutTimePicker">
    </up-datetime-picker>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getComplaintRiskList } from '@/api';

// 时间选择器状态
const { bool: showCreateTimePicker, setTrue: showCreateTimePickerModal, setFalse: hideCreateTimePicker } = useBoolean();
const { bool: showInTimePicker, setTrue: showInTimePickerModal, setFalse: hideInTimePicker } = useBoolean();
const { bool: showOutTimePicker, setTrue: showOutTimePickerModal, setFalse: hideOutTimePicker } = useBoolean();

// 时间选择器相关变量
const currentTimeType = ref(''); // 当前选择的时间类型：create-创建时间，in-驶入时间，out-驶出时间
const createTime = ref(Date.now()); // 创建时间，默认为当前时间
const inTime = ref(Date.now()); // 驶入时间，默认为当前时间
const outTime = ref(Date.now()); // 驶出时间，默认为当前时间
const isZero = ref('-1'); // 是否0元
const columns = reactive([['是', '否']]);
const currentTab = ref(0);
const tabsList = ref([
  {
    name: '全部',
    value: '0',
  },
  {
    name: '待支付',
    value: '1',
  },
  {
    name: '已支付',
    value: '2',
  },
])

// z-paging 组件引用
const paging = ref(null)

// 当前显示的列表数据
const currentList = ref([])

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
}

const handlePass = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定通过审核吗？',
    success: (res) => {
      if (res.confirm) {
        // 确认通过审核
      }
    }
  })
}

const handleRefuse = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定拒绝审核吗？',
    success: (res) => {
      if (res.confirm) {
        // 确认拒绝审核
      }
    }
  })
}





// 打开创建时间选择器
const openCreateTimePicker = () => {
  showCreateTimePickerModal();
}

// 打开驶入时间选择器
const openInTimePicker = () => {
  showInTimePickerModal();
}

// 打开驶出时间选择器
const openOutTimePicker = () => {
  showOutTimePickerModal();
}

// 创建时间选择器确认事件
const handleCreateTimeConfirm = (e) => {
  createTime.value = e.value;
  hideCreateTimePicker();
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 驶入时间选择器确认事件
const handleInTimeConfirm = (e) => {
  inTime.value = e.value;
  hideInTimePicker();
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 驶出时间选择器确认事件
const handleOutTimeConfirm = (e) => {
  outTime.value = e.value;
  hideOutTimePicker();
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理是否0元选择确认
const handleIsZeroConfirm = (e) => {
  const selectedValue = e.value[0];
  isZero.value = selectedValue === '是' ? '0' : '1';
  
  // 关闭选择器
  showTimePicker = false;
  
  // 重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 获取易被投诉订单列表数据
const queryList = async (pageNo, pageSize) => {
  console.log(pageNo, pageSize)

  const params = {
    status: currentTab.value === 0 ? '-1' : (currentTab.value - 1).toString(), // 根据当前选项卡设置状态
    keyword: '', // 关键字查询
    isOwn: '0', // 是否本人 默认全部
    dateType: '', // 查询时间类型
    startDate: inTime.value, // 开始日期 - 使用驶入时间
    endDate: outTime.value, // 结束日期 - 使用驶出时间
    pageNum: pageNo,
    pageSize,
    isZero: isZero.value, // 是否0元
    createTime: createTime.value // 创建时间
  }

  await fetchList(params)
};

const fetchList = async (params) => {
  try {
    const result: any = await getComplaintRiskList(params)
    const data = result.data
    paging.value.complete(data.records || [])
  } catch (error) {
    paging.value.complete(false)
  }
}

// 选项卡切换事件
const handleTabChange = (e) => {
  const newIndex = e.index;
  if (currentTab.value === newIndex) {
    return; // 如果是同一个tab，不需要重新加载
  }

  currentTab.value = newIndex;

  // 切换tab时重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 获取支付状态文本
const getPayStatusText = (isPay) => {
  const statusMap = {
    '0': '待支付',
    '1': '已支付',
    '2': '无需支付',
    '3': '欠费'
  };
  return statusMap[isPay] || '未知状态';
};

// 获取支付状态类型
const getPayStatusType = (isPay) => {
  const typeMap = {
    '0': 'warning',
    '1': 'success',
    '2': 'info',
    '3': 'error'
  };
  return typeMap[isPay] || 'default';
};

// 获取异常状态文本
const getStatusText = (status) => {
  const statusMap = {
    '0': '车入车出时间异常',
    '1': '车牌重复',
    '2': '人工结束',
    '3': '车入车出不一致',
    '4': '后车驶入结算前车'
  };
  return statusMap[status] || '未知异常';
};

// 页面挂载时获取数据
onMounted(() => {
  fetchList({
    pageNum: 1,
    pageSize: 10,
  })
});
</script>

<style scoped lang="scss">
.charging-rule-wait-list {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx 0rpx;

  .time-picker {
    width: 480rpx;
    display: flex;
    align-items: center;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }
  }

  &-item {
    display: flex;
    flex: 0 0 50%;
    align-items: center;
    margin-bottom: 20rpx;

    .location-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .waiting-count {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #fe6000;
      margin-left: 10rpx;
    }
  }
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>